import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import { IconButton, Tooltip, Box } from '@mui/material';
import { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';
import { alpha } from '@mui/material/styles';

const ThemeToggle = () => {
    const { mode, toggleTheme } = useContext(ThemeContext);

    return (
        <Tooltip title={mode === 'light' ? '切换暗色模式' : '切换明亮模式'}>
            <Box
                sx={{
                    position: 'relative',
                    overflow: 'hidden',
                    borderRadius: '50%',
                    '&::before': {
                        content: '""',
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        background: alpha('#fff', 0.1),
                        borderRadius: '50%',
                        opacity: 0,
                        transition: 'opacity 0.3s ease',
                    },
                    '&:hover::before': {
                        opacity: 1,
                    }
                }}
            >
                <IconButton 
                    onClick={toggleTheme} 
                    color="inherit"
                    aria-label="切换主题"
                    sx={{
                        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                        borderRadius: '50%',
                        border: `2px solid ${alpha('#fff', 0.2)}`,
                        bgcolor: alpha('#fff', 0.1),
                        backdropFilter: 'blur(10px)',
                        '&:hover': {
                            transform: 'scale(1.1) rotate(15deg)',
                            bgcolor: alpha('#fff', 0.2),
                            borderColor: alpha('#fff', 0.4),
                            boxShadow: '0 4px 12px rgba(255,255,255,0.2)',
                        },
                        '& svg': {
                            transition: 'all 0.3s ease',
                        }
                    }}
                >
                    {mode === 'light' ? 
                        <Brightness4Icon sx={{ 
                            color: '#87ceeb',
                            filter: 'drop-shadow(0 0 8px rgba(135,206,235,0.6))'
                        }} /> : 
                        <Brightness7Icon sx={{ 
                            color: '#ffd700',
                            filter: 'drop-shadow(0 0 8px rgba(255,215,0,0.6))'
                        }} />
                    }
                </IconButton>
            </Box>
        </Tooltip>
    );
};

export default ThemeToggle;